<%@ page contentType="text/html;charset=UTF-8" %>
  <!DOCTYPE html>
  <html>

  <head>
    <title>管理员注册</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
      }

      .container {
        max-width: 400px;
        margin: 50px auto;
        background: white;
        padding: 30px;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }

      .title {
        text-align: center;
        margin-bottom: 30px;
        color: #333;
      }

      .form-group {
        margin-bottom: 15px;
      }

      label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
      }

      input[type="text"],
      input[type="password"] {
        width: 100%;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-sizing: border-box;
      }

      button {
        width: 100%;
        padding: 12px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
        margin-top: 10px;
      }

      button:hover {
        background-color: #0056b3;
      }

      button:disabled {
        background-color: #6c757d;
        cursor: not-allowed;
      }

      .back-btn {
        background-color: #6c757d;
      }

      .back-btn:hover {
        background-color: #545b62;
      }

      .message {
        margin-top: 15px;
        padding: 10px;
        border-radius: 4px;
        display: none;
      }

      .success {
        background-color: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
      }

      .error {
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <h2 class="title">管理员注册</h2>

      <form id="registerForm">
        <div class="form-group">
          <label for="admin_name">用户名 *</label>
          <input type="text" id="admin_name" name="admin_name" required>
        </div>

        <div class="form-group">
          <label for="admin_nickname">昵称 *</label>
          <input type="text" id="admin_nickname" name="admin_nickname" required>
        </div>

        <div class="form-group">
          <label for="admin_password">密码 *</label>
          <input type="password" id="admin_password" name="admin_password" required>
        </div>

        <div class="form-group">
          <label for="admin_password_confirm">确认密码 *</label>
          <input type="password" id="admin_password_confirm" name="admin_password_confirm" required>
        </div>

        <button type="button" id="registerBtn">注册</button>
        <button type="button" class="back-btn"
          onclick="window.location.href='${pageContext.request.contextPath}/admin/login'">返回登录</button>
      </form>

      <div id="message" class="message"></div>
    </div>

    <script>
      $(document).ready(function () {
        console.log("页面加载完成");

        $('#registerBtn').click(function () {
          console.log("注册按钮被点击");

          var admin_name = $('#admin_name').val().trim();
          var admin_nickname = $('#admin_nickname').val().trim();
          var admin_password = $('#admin_password').val().trim();
          var admin_password_confirm = $('#admin_password_confirm').val().trim();

          console.log("表单数据:", {
            admin_name: admin_name,
            admin_nickname: admin_nickname,
            admin_password: admin_password ? "***" : "",
            admin_password_confirm: admin_password_confirm ? "***" : ""
          });

          // 基本验证
          if (!admin_name) {
            showMessage('请输入用户名', 'error');
            return;
          }

          if (admin_name.length < 3) {
            showMessage('用户名长度不能少于3位', 'error');
            return;
          }

          if (!admin_nickname) {
            showMessage('请输入昵称', 'error');
            return;
          }

          if (!admin_password) {
            showMessage('请输入密码', 'error');
            return;
          }

          if (admin_password.length < 6) {
            showMessage('密码长度不能少于6位', 'error');
            return;
          }

          if (admin_password !== admin_password_confirm) {
            showMessage('两次输入的密码不一致', 'error');
            return;
          }

          // 禁用按钮
          $('#registerBtn').prop('disabled', true).text('注册中...');

          // 发送AJAX请求
          $.ajax({
            url: '${pageContext.request.contextPath}/admin/register',
            type: 'POST',
            data: {
              admin_name: admin_name,
              admin_nickname: admin_nickname,
              admin_password: admin_password
            },
            dataType: 'json',
            success: function (response) {
              console.log('注册成功响应:', response);
              $('#registerBtn').prop('disabled', false).text('注册');

              if (response.success) {
                showMessage('注册成功！3秒后跳转到登录页面...', 'success');
                setTimeout(function () {
                  window.location.href = '${pageContext.request.contextPath}/admin/login';
                }, 3000);
              } else {
                showMessage('注册失败: ' + (response.message || '未知错误'), 'error');
              }
            },
            error: function (xhr, status, error) {
              console.log('注册失败:', {
                status: status,
                error: error,
                responseText: xhr.responseText,
                statusCode: xhr.status
              });

              $('#registerBtn').prop('disabled', false).text('注册');
              showMessage('注册失败: ' + error, 'error');
            }
          });
        });
      });

      function showMessage(text, type) {
        var messageDiv = $('#message');
        messageDiv.removeClass('success error').addClass(type);
        messageDiv.text(text).show();

        // 5秒后自动隐藏消息
        setTimeout(function () {
          messageDiv.hide();
        }, 5000);
      }
    </script>
  </body>

  </html>